<template>
  <div :style="{ width: isCollapse ? '64px' : '210px', height: '100vh', overflow: 'hidden', transition: 'width 0.3s ease' }">
    <el-menu
        :style="{ 
          height: '100%', 
          backgroundColor: '#a0d8ff', 
          borderRight: 'none',
          fontSize: '18px'
        }"
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        router
        :collapse="isCollapse"
        :collapse-transition="false"  
    >
      <!-- 折叠按钮 -->
      <div class="collapse-button" @click="toggleCollapse">
        <el-icon>
          <component :is="isCollapse ? 'Expand' : 'Fold'"></component>
        </el-icon>
      </div>

      <!-- 菜单项 -->
      <router-link to="/TopPage">
        <el-menu-item index="TopPage">
          <!-- 首页对应"主" -->
          <div class="custom-icon">
            <span class="icon-text">主</span>
          </div>
          <span class="menu-text">首页</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage1">
        <el-menu-item index="manage1">
          <!-- 案件查询与展示对应"查" -->
          <div class="custom-icon">
            <span class="icon-text">查</span>
          </div>
          <span class="menu-text">案件查询与展示</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage2">
        <el-menu-item index="manage2">
          <!-- 送达与拘传指引对应"送" -->
          <div class="custom-icon">
            <span class="icon-text">送</span>
          </div>
          <span class="menu-text">送达与拘传指引</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage3">
        <el-menu-item index="manage3">
          <!-- 关联人财产查询对应"联" -->
          <div class="custom-icon">
            <span class="icon-text">联</span>
          </div>
          <span class="menu-text">关联人财产查询</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage4">
        <el-menu-item index="manage4">
          <!-- 清场辅助与评估对应"清" -->
          <div class="custom-icon">
            <span class="icon-text">清</span>
          </div>
          <span class="menu-text">清场辅助与评估</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage10">
        <el-menu-item index="manage10">
          <!-- 企业评估反担保对应"企" -->
          <div class="custom-icon">
            <span class="icon-text">企</span>
          </div>
          <span class="menu-text">企业评估反担保</span>
        </el-menu-item>
      </router-link>
      <router-link to="/companyQCC">
        <el-menu-item index="companyQCC">
          <!-- 企业评估反担保对应"企" -->
          <div class="custom-icon">
            <span class="icon-text">企</span>
          </div>
          <span class="menu-text">企查查接口</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage7" v-if="currentUser && currentUser.role === 'ADMIN'">
        <el-menu-item index="manage7">
          <!-- 用户与权限管理对应"权" -->
          <div class="custom-icon">
            <span class="icon-text">权</span>
          </div>
          <span class="menu-text">用户与权限管理</span>
        </el-menu-item>
      </router-link>
      <router-link to="/manage6" v-if="currentUser && currentUser.role === 'ADMIN'">
        <el-menu-item index="manage6">
          <!-- 数据管理与上传对应"数" -->
          <div class="custom-icon">
            <span class="icon-text">数</span>
          </div>
          <span class="menu-text">数据管理与上传</span>
        </el-menu-item>
      </router-link>
      
      <!-- 执行管理协作模块 -->
      <router-link to="/GuanliXiezuo" v-if="currentUser && (currentUser.role === 'ZHONG' || currentUser.role === 'ADMIN')">
        <el-menu-item index="GuanliXiezuo">
          <div class="custom-icon">
            <span class="icon-text">管</span>
          </div>
          <span class="menu-text">执行管理协作</span>
        </el-menu-item>
      </router-link>
      <!-- 日志管理菜单 -->
      <el-sub-menu index="log" v-if="currentUser && currentUser.role === 'ADMIN'">
        <template #title>
          <!-- 为系统日志图标添加容器，确保与其他图标占位一致 -->
          <div class="system-log-icon">
            <el-icon><Notebook /></el-icon>
          </div>
          <span>系统日志管理</span>
        </template>
        <router-link to="/manage8">
          <el-menu-item index="manage8">
            <div class="system-log-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
            <span>登录登出日志</span>
          </el-menu-item>
        </router-link>
        <router-link to="/manage9">
          <el-menu-item index="manage9">
            <div class="system-log-icon">
              <el-icon><Document /></el-icon>
            </div>
            <span>用户操作日志</span>
          </el-menu-item>
        </router-link>
      </el-sub-menu>
      
    </el-menu>
  </div>
</template>

<style scoped>
/* ---------- 基础菜单 ---------- */
.el-menu {
  background-color: #a0d8ff !important;
  border-right: none;
  font-size: 18px !important;
  transition: none !important;
  width: 100% !important;
}

.el-menu-item {
  color: #333 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 60px !important;
  line-height: 60px !important;
  font-size: 18px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16px !important; /* 固定图标位置的关键内边距 */
  width: 100% !important;
}

.el-menu-item:hover,
.el-menu-item.is-active {
  background-color: #90c7f0 !important;
  color: #000 !important;
}

/* ---------- 子菜单项 ---------- */
.el-sub-menu .el-menu-item {
  background-color: #87c1e8 !important;
  min-width: 240px !important;
  font-size: 17px !important;
  padding-left: 40px !important; /* 增加左侧内边距，与上级菜单区分 */
}

.el-sub-menu .el-menu-item:hover,
.el-sub-menu .el-menu-item.is-active {
  background-color: #7ab0d6 !important;
  color: #000 !important;
}

/* ---------- 子菜单标题 ---------- */
:deep(.el-sub-menu__title) {
  color: #333 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 60px !important;
  line-height: 60px !important;
  font-size: 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让标题内容和箭头分别在两端 */
  padding-left: 16px !important;
  padding-right: 16px !important; /* 右侧留出箭头位置 */
  width: 100% !important;
}

/* 修复下拉箭头位置 */
:deep(.el-sub-menu__icon-arrow) {
  position: static !important; /* 取消绝对定位 */
  margin-left: auto !important; /* 自动右对齐 */
  transition: transform 0.3s ease !important;
}

:deep(.el-sub-menu__title:hover),
:deep(.el-sub-menu.is-opened .el-sub-menu__title),
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
  background-color: #90c7f0 !important;
  color: #000 !important;
}

/* 图标样式 */
:deep(.el-icon),
:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon) {
  font-size: 22px !important;
  transition: none !important;
}

:deep(.el-sub-menu__title:hover .el-icon),
:deep(.el-sub-menu.is-opened .el-sub-menu__title .el-icon) {
  color: #000 !important;
}

/* 自定义文字图标样式 */
.custom-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0; /* 防止图标被压缩 */
  transition: none !important;
}

/* 系统日志图标容器 - 确保与自定义圆形图标占位相同 */
.system-log-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0; /* 防止被压缩 */
}

/* 图标内文字样式 */
.icon-text {
  font-size: 18px;
  font-weight: bold;
  transition: none !important;
}

/* ---------- 折叠按钮 ---------- */
.collapse-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px !important;
  background-color: #90c7f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.collapse-button:hover {
  background-color: #80b6e0;
}

.collapse-button :deep(.el-icon) {
  font-size: 22px !important;
}

/* ---------- 折叠时的样式处理 - 核心修改 ---------- */
/* 收缩时隐藏文字但保持图标位置 */
:deep(.el-menu--collapse) .menu-text,
:deep(.el-menu--collapse .el-sub-menu__title span) {
  display: none; /* 隐藏文字 */
}

/* 收缩时调整箭头位置 */
:deep(.el-menu--collapse .el-sub-menu__icon-arrow) {
  display: none;
}

/* 收缩时保持图标位置不变 */
:deep(.el-menu--collapse) .el-menu-item,
:deep(.el-menu--collapse) .el-sub-menu__title {
  padding-left: 16px !important; /* 保持与展开时相同的内边距 */
  justify-content: flex-start; /* 保持左对齐，不居中 */
}

/* 收缩时移除图标右侧间距 */
:deep(.el-menu--collapse) .custom-icon,
:deep(.el-menu--collapse) .system-log-icon {
  margin-right: 0 !important;
}

/* ---------- 路由链接去下划线 ---------- */
.el-menu a {
  text-decoration: none;
  color: inherit;
}

/* ---------- 激活项加粗 ---------- */
.el-menu-item.is-active span {
  font-weight: bold;
}
</style>

<script>
import {
  UserFilled,
  Document,
  Notebook,
  Expand,
  Fold
} from '@element-plus/icons'
import { ref, onMounted, computed } from 'vue'
import request from '@/utils/request'
import { useRoute } from 'vue-router'

export default {
  name: "Aside",
  components: {
    Notebook,
    UserFilled,
    Document,
    Expand,
    Fold
  },
  setup() {
    const currentUser = ref(null)
    const route = useRoute()
    const isCollapse = ref(true)

    const activeMenu = computed(() => {
      const path = route.path
      switch (path) {
        case '/TopPage':
          return 'TopPage'
        case '/manage1':
          return 'manage1'
        case '/manage2':
          return 'manage2'
        case '/manage3':
          return 'manage3'
        case '/manage4':
          return 'manage4'
        case '/manage5':
          return 'manage5'
        case '/manage6':
          return 'manage6'
        case '/manage7':
          return 'manage7'
        case '/manage8':
          return 'manage8'
        case '/manage9':
          return 'manage9'
        case '/manage10':
          return 'manage10'
        default:
          return 'TopPage'
      }
    })

    const getCurrentUser = async () => {
      try {
        const response = await request.get('/user/info')
        if (response.code === 200) {
          currentUser.value = response.data
        }
      } catch (error) {
        console.error('获取当前用户信息失败:', error)
      }
    }

    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value
    }

    onMounted(() => {
      getCurrentUser()
    })

    return {
      currentUser,
      activeMenu,
      isCollapse,
      toggleCollapse
    }
  }
}
</script> 
    